<template>
  <view>
    <view class="fans-top">
      <view class="left">直推人ID</view>
	  <view class="line1"></view>
	  <view class="center">昵称</view>
	  <view class="line2"></view>
      <view class="right">级别</view>
    </view>
    <view class="fans-main" v-if="list.length">
      <view class="fans-main-item" v-for="(item,index) in list" :key='index'>
        <view class="item-left">
          {{item.shortid}}
        </view>
		<view class="item-center">
		  {{item.nickName}}
		</view>
        <view class="item-right">
          {{item.rank}}
        </view>
      </view>
    </view>
	<view class="nodata flex_center" v-else>
		~暂无数据~
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabValue: ['拼团返还', '组团奖励'],
      index: 0,
	  pageIndex:1,
	  pageSize:10,
	  list:[],
	  finish:false,
	  messageInfo:{}
    };
  },
  methods: {
		getlist() {
			this.$ajax('api/Member/QueryMyFriend', { pageIndex: this.pageIndex, pageSize: this.pageSize }).then(res => {
				this.messageInfo = res.Data
				if (res.Data.list.length) {
					this.list = this.list.concat(
						res.Data.list.map(item => {
							item.checked = false;
							return item;
						})
					);
					this.pageIndex++;
					this.finish = false;
				} else {
					this.finish = true;
				}
				uni.hideLoading();
			});
		}
	},
	onShow() {
		this.pageIndex = 1
		this.list = []
		this.getlist();
	},
	onReachBottom() {
		uni.showLoading({
			title: '加载中'
		});
		if (!this.finish) {
			this.getlist();
		}else{
			uni.hideLoading()
		}
	}
};
</script>

<style lang="scss">
.fans-top {
  width: 100%;
  height: 90rpx;
  background-color: #202029;
  display: flex;
  color: #ffffff;
  position: sticky;
  top: 0;
  .line1 {
    width: 2rpx;
    height: 30rpx;
    position: absolute;
    top: 31rpx;
    left: 223rpx;
    background-color: #3E3E4E;
  }
  .line2 {
    width: 2rpx;
    height: 30rpx;
    position: absolute;
    top: 31rpx;
    left: 522rpx;
    background-color: #3E3E4E;
  }
  .left {
    flex: 30%;
    text-align: center;
    line-height: 90rpx;
    font-size: 30rpx;
  }
  .center {
    flex: 40%;
    text-align: center;
    line-height: 90rpx;
    font-size: 30rpx;
  }
  .right {
    flex: 30%;
    text-align: center;
    line-height: 90rpx;
	font-size: 30rpx;
  }
}

.fans-main {
  .fans-main-item {
    height: 94rpx;
    border-bottom: 1rpx solid #E2E2E2;
    display: flex;
    .item-left {
      flex: 30%;
      text-align: center;
      line-height: 94rpx;
    }
	.item-center {
	  flex: 40%;
	  text-align: center;
	  line-height: 94rpx;
	}
    .item-right {
      flex: 30%;
      text-align: center;
      line-height: 94rpx;
    }
  }
}
</style>
